<template>
    <view class="nav">
        <!-- 顶部状态栏 -->
        <view :style="'height:'+status+'rpx;'+containeStyle"></view>
        <!-- 内容区 -->
        <view v-if="isHome" class="headNav"
            :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;padding-left:20rpx;'">
            <text class="city">中部地区</text>
            <view style="flex:1">
                <navigator url="../../pages/search/index" :style="
                    'height:'+
                    (menuButtonInfo.height*2)+
                    'rpx;line-height:'+
                    (menuButtonInfo.height*2)+
                    'rpx;margin-top:'+
                    (menuButtonInfo.top*2-status)+
                    'rpx;margin-left:32rpx;margin-right:'+
                    (menuButtonInfo.width*2+24)+
                    'rpx;background:#f4f4f4;border-radius:200rpx;text-align:center;'">
                    <text class="search-text">找医院</text>
                </navigator>
            </view>
        </view>
        <view v-else class="navbar" :style="'height:'+navHeight+'rpx;'+containeStyle">
            <view class="back-icon" @click="backOrHome">
                <image v-if="pages>1" src="../../static/resource/navbar/返回.png"></image>
                <image v-else src="../../static/resource/navbar/仓储仓库.png"></image>
            </view>
            <view class="nav-title" v-if="titleText">
                <view :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;'+textStyle">
                    {{titleText}}
                </view>
            </view>

        </view>
    </view>
</template>

<script setup>
    import {
        ref,
        onBeforeMount,
        defineProps,
        reactive
    } from 'vue';
    const props = defineProps({
        background: {
            type: String,
            default: 'rgba(255,255,255,1)'
        },
        color: {
            type: String,
            default: 'rgba(0,0,0,1)'
        },
        fontSize: {
            type: String,
            default: 32
        },
        iconWidth: {
            type: String,
            default: 116
        },
        iconHeight: {
            type: String,
            default: 38
        },
        titleText: {
            type: String,
            default: ''
        },
        isHome: {
            type: String,
            default: false
        }
    })
    const emits = defineEmits(['navBarAttached'])
    onBeforeMount(() => {
        setNavSize()
        setStyle()
        emits('navBarAttached', {
            detail: {
                statusHeight: status.value,
                navHeight: navHeight.value,
                navBarHeight: status.value + navHeight.value
            }
        })
    })
    //状态栏高度
    const status = ref(0)
    //内容高度
    const navHeight = ref(0)
    //计算状态栏高度
    const setNavSize = () => {
        //系统版本 和 高度
        const {
            system,
            statusBarHeight
        } = uni.getSystemInfoSync()
        status.value = statusBarHeight * 2
        const isIOS = system.indexOf('iOS') > -1
        if (!isIOS) {
            navHeight.value = 96
        } else {
            navHeight.value = 88
        }
    }
    //背景颜色
    const containeStyle = ref('')
    //字体样式
    const textStyle = ref('')
    //图标样式
    const iconStyle = ref('')
    //样式设置
    const setStyle = () => {
        containeStyle.value = ['background:' + props.background].join(";")
        textStyle.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(';')
        iconStyle.value = ['width:' + props.iconWidth + 'rpx', 'height:' + props.iconHeight + 'rpx'].join(';')
    }
    //页面栈的数量
    const pages = ref(getCurrentPages().length)
    console.log(pages.value)
    //判断是返回上一级还是返回主页
    const backOrHome = () => {
        if (pages.value > 1) {
            uni.navigateBack()
        } else {
            uni.switchTab({
                url: '/pages/index/index'
            })
        }
    }
    //获取胶囊的位置信息
    let menuButtonInfo = reactive(uni.getMenuButtonBoundingClientRect())
</script>

<style>
    .nav {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 2;
    }

    .back-icon {
        display: flex;
        align-items: center;
        width: 64rpx;
        height: 100%;
        margin-left: 10rpx;
    }

    .back-icon image {
        width: 64rpx;
        height: 64rpx;
    }

    .navbar {
        position: relative;
    }

    .nav-title {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%);
    }

    .headNav {
        display: flex;
    }

    .city {
        display: inline-block;
        position: relative;
        font-size: 30rpx;
        font-weight: bold;
        padding-left: 55rpx;
        background: url() no-repeat left center;
        background-size: 40rpx;
    }

    .city:after {
        content: ' ';
        display: inline-block;
        height: 6px;
        width: 6px;
        border-width: 1px 1px 0 0;
        border-color: #353535;
        border-style: solid;
        -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        position: relative;
        top: -2px;
        position: absolute;
        top: 50%;
        margin-top: -4px;
        right: -10px;
    }

    .search-text {
        display: inline-block;
        padding-left: 30rpx;
        color: #bbbbbb;
        font-size: 26rpx;
        background: url() no-repeat left center;
        background-size: 23rpx;
    }
</style>